<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .head{
        width: 100%;
        height: 80px;
        background-color: black;
        /* font-family: "Tulpen One", cursive */
        overflow: hidden;

    }
    .logo{
        margin-left: 200px;
        float: left;
    }
    .bgc{
        width: 100%;
        height: 800px;
        background: url(http://demo.mxyhn.xyz:8020/cssthemes4/cpts_784_bgx/images/banner.jpg);
        float: left;
    }
    .zi{
        color: rgb(255, 255, 255);
        font-family: "Alex Brush", cursive;
        font-size: 48px;
        font-weight: 600;
        line-height: 52.8px;
        text-align: center;
        text-transform: capitalize;
        margin-top: 70px;

    }
    .zi:hover{
        color: #FFFF00;
    }
    .zi1{
        color: white;
        font-size: 20px;
        font-weight: bold;
        font-family: "Alex Brush", cursive;
        position: absolute;
        left: 500px;
        top: 220px;
    }
    .zi1:hover{
        color: #FFFF00;
    }
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }
    .head-right{
        width: 550px;
        height: 80px;
        float: left;
        margin-left: 180px;
    }
    li:hover{
        color: yellow;
    }
    ul li{
        float: left;
        list-style: none;
        line-height: 80px;
        font-size: 19px;
        font-weight: bold;
        color: lightgoldenrodyellow;
        margin-left: 30px;
    }
    .aaa{
        width: 460px;
        height: 80px;
        float: right;

    }
</style>
<body>

<div id="app">
    <div class="head">
        <div class="logo">
            <img style="width: 120px; height: 80px;" src="https://img1.baidu.com/it/u=3420146899,3704747514&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=418" >
        </div>

        <div class="head-right">
            <ul>
                <li>主页</li>
                <li>主食</li>
                <li>菜类</li>
                <li>汤类</li>
                <li>小吃类</li>
                <li>饮料</li>
            </ul>
        </div>

        <<div class="aaa">
        <el-button type="info" @click="order()" plain style="position: absolute;left: 1000px;top: 20px;">我的订单</el-button>
        <el-button type="primary" plain @click="dialogFormVisible = true" style="position: absolute;left: 1110px;top: 20px;">立即登录</el-button>
        <el-button type="primary" plain @click="undialogFormVisible = true" style="position: absolute;left: 1230px;top: 20px;">用户登录</el-button>
        <el-button type="warning" plain @click="register()" style="position: absolute;left: 1350px;top: 20px;">注册账号</el-button>
    </div>

    </div>
    <!-- 登录账号 -->
    <el-dialog title="登录账号" :visible.sync="dialogFormVisible" style="width: 1000px;margin-left: 240px;border-radius: 10px;">
        <el-form :model="info" status-icon :rules="rules" ref="info" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="账号" prop="username">
                <el-input  v-model="info.username" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="info.password" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('info')">提交</el-button>
                <el-button @click="resetForm('info')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 用户登录窗口 -->
    <el-dialog title="用户登录" :visible.sync="undialogFormVisible" style="width: 1000px;margin-left: 240px;">
        <el-form :model="dataInfo" status-icon :rules="rules" ref="dataInfo" label-width="100px" class="demo-ruleForm" >
            <el-form-item label="账号" prop="zhanghao">
                <el-input  v-model="dataInfo.zhanghao" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="mima">
                <el-input type="password" v-model="dataInfo.mima" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="commit('dataInfo')">提交</el-button>
                <el-button @click="resetForm('dataInfo')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <div class="bgc">
        <h1 style="color: white;">{{user.nickname}}</h1>
        <h1 class="zi" data-wow-duration="1000ms" data-wow-delay="300ms">Sed ut perspiciatis unde omnis iste natus</span></h1>
        <span class="zi1">Excepteur sint occaecat cupidatat non proident</span>

        <div class="lbt" style="margin-left: 120px;margin-top: 80px;float: left;">
            <template>
                <el-carousel :interval="1500" indicator-position="none" arrow="always" style="width: 300px;height: 300px;border-radius: 100%; border: 6px white solid;">
                    <el-carousel-item v-for="item in sreenList" :key="item">
                        <img :src="item" style="width: 300px;height: 300px;border-radius: 100%;">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <div class="lbt1" style="margin-left: 120px;margin-top: 80px;float: left;">
            <template>
                <el-carousel :interval="1500" indicator-position="none" arrow="always" style="width: 300px;height: 300px;border-radius: 100%; border: 6px white solid;">
                    <el-carousel-item v-for="item in sreenList1" :key="item">
                        <img :src="item" style="width: 300px;height: 300px;border-radius: 100%;">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>
        <div class="lbt2" style="margin-left: 120px;margin-top: 80px;float: left;">
            <template>
                <el-carousel :interval="1500" indicator-position="none" arrow="always" style="width: 300px;height: 300px;border-radius: 100%; border: 6px white solid;">
                    <el-carousel-item v-for="item in sreenList2" :key="item">
                        <img :src="item" style="width: 300px;height: 300px;border-radius: 100%;">
                    </el-carousel-item>
                </el-carousel>
            </template>
        </div>

    </div>

</div>

<script>
    var haha = new Vue({
        el:"#app",
        data:{
            user:{
                id:'',
                nickname:'',
                zhanghao:'',
                mima:'',
                state:''
            },
            dataInfo:{},
            sreenList:[
                'https://img0.baidu.com/it/u=1425260383,2384289127&fm=253&fmt=auto&app=138&f=JPEG?',
                'https://img0.baidu.com/it/u=2668970605,2895910255&fm=253&fmt=auto&app=138&f=JPEG?',
                'https://img2.baidu.com/it/u=1812806856,2915198228&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=333'
            ],
            sreenList1:[
                'https://img1.baidu.com/it/u=595730206,3484875219&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=439',
                'https://img0.baidu.com/it/u=4224404811,20866190&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                'https://img1.baidu.com/it/u=3127238039,2665158565&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
            ],
            sreenList2:[
                'https://img2.baidu.com/it/u=1903742828,1283454301&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                'https://img0.baidu.com/it/u=2285367186,932075921&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=353',
                'https://img0.baidu.com/it/u=1035090109,1161716915&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333'
            ],
            undialogFormVisible:false,
            dialogFormVisible:false,
            info:{},
            rules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 8, message: '账号长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                zhanghao: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 11, max: 11, message: '长度在 11 到 11 个字符', trigger: 'blur' }
                ],
                mima: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            }
        },
        methods:{
            order(){
                haha.$alert('<strong>请登录后查看订单</strong>', '您还未登录', {
                    dangerouslyUseHTMLString: true
                });
            },
            submitForm(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/aaa/admin/login",haha.info,function (backData) {
                            if( backData.code == 2 ){
                                haha.$message.error(backData.msg);
                            }else if ( backData.code == 1 ){
                                window.location.href = "/aaa/main.html";
                            }
                        });
                    }
                });
            },
            register(){
                window.location.href = "/aaa/register.html";
            },
            commit(formName) {
                haha.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/aaa/admin/denglu",haha.dataInfo,function (backData) {
                            if( backData.code == 1 ){
                                haha.undialogFormVisible = false;
                                haha.user = backData.data;
                                var id = haha.user.id;
                                window.location.href = "/aaa/user.html?id="+id;
                            }else {
                                haha.$message.error(backData.msg);
                            }
                        });
                    }
                });
            }
        }
    })

</script>
</body>
</html>